import { Component, OnInit } from '@angular/core';
import { DialogService } from '../../shared/dialog.service';
import { Router, RouteConfigLoadStart, NavigationError, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { ApplicationService } from "../../service/application.service";

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: [
    './navigation.component.css',
  ]
})
export class NavigationComponent implements OnInit {
  isFetching = true;
  startX = 0;
  startY = 0;
  scale = 1;

  
  constructor(
    private router: Router,
    private application: ApplicationService) {
    router.events.subscribe(evt => {
      if (!this.isFetching && evt instanceof RouteConfigLoadStart) {
        this.isFetching = true;
      }
      if (evt instanceof NavigationError) {
        this.isFetching = false;
        return;
      }
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      setTimeout(() => {
        this.isFetching = false;
      }, 100);
    });

  }

  ngOnInit() {
    document.onselectstart = function () { return false; };    // 屏蔽选择文本
    //document.ondragstart = function () { return false; };
    

  }

  onMousedown(ev) {
    this.startX = ev.pageX;
    this.startY = ev.pageY;

  }
  onMouseup(ev) {
    if (this.scale <= 1) {
      return false;
    };
    const endX = ev.pageX,
      endY = ev.pageY;
    let posX = 0;
    let posY = 0;
    if (Math.abs(this.startX - endX) > 100) {
      const moveX = endX - this.startX;
      posX = parseFloat(($('body').css('marginLeft')).slice(0, -2)) + moveX;
      posX = posX > 0 ? 0 : posX;
      $('body').animate({ 'marginLeft': posX + 'px', cursor: 'move' });
    }
    if (Math.abs(this.startY - endY) > 100) {
      const moveY = endY - this.startY;
      posY = parseFloat(($('body').css('marginTop')).slice(0, -2)) + moveY;
      posY = posY > 0 ? 0 : posY;
      $('body').animate({ 'marginTop': posY + 'px', cursor: 'move' });
    }

  }
  
  onChangeScale(ev) {
    this.scale = ev;
    if (this.scale > 1) {
      $('body').css({ cursor: 'move' });
    } else if (this.scale == 1) {
      $('body').css({ 'marginLeft': 0 + 'px', 'marginTop': 0 + 'px', cursor: 'default' });
    }
  }
}



// WEBPACK FOOTER //
// ./src/app/module/navigation/navigation.component.ts